View Animation

View Animation 是Android最簡單使用的一種動畫呈現方式了，可以在各種View 上做透明度、大小、位置、旋轉的動畫。

透過xml定義動畫效果，xml置於res/anim目錄下

4 種動畫效果

• alpha 透明度
• scale 大小縮放
• translate 位置移動
• rotate 旋轉

alpha

透明度變化的動畫效果(淡入淡出)

android:duration 動畫持續的時間(毫秒)
android:fromAlpha 動畫開始的透明度。0為完全透明，1為不透明。
android:toAlpha 動畫結束的透明度。0為完全透明，1為不透明。

例：2秒慢慢變為完全透明

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="2000"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
</set>

translate

移動動畫效果

android:duration 動畫持續的時間(毫秒)
android:fromXDelta 起始X座標偏移量
android:toXDelta 結束X座標偏移量
android:fromYDelta 起始Y座標偏移量
android:toYDelta 結束Y座標偏移量

以上的值可使用%設定相對View的百分比位置，或%P來設定相對Parent View的百分比位置

例：移動至XY至原View的一倍距離。

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="100%" />
</set>

scale

縮放的動畫效果

android:duration 動畫持續的時間(毫秒)
android:fromXScale 起始的X座標縮放倍數
android:toXScale 結束的X座標縮放倍數
android:fromYScale 起始的Y座標縮放倍數
android:toYScale 結束的Y座標縮放倍數
android:pivotX 縮放時不變的X坐標，用%表示)
android:pivotY 縮放時不變的Y坐標，用%表示)

例：將圖片放大3倍，pivotX="50%" 代表中心點在中間

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="3.0"
        android:toYScale="3.0" />
</set>

rotate

旋轉的動畫效果

android:duration 動畫持續的時間(毫秒)
android:fromDegrees 旋轉開始的角度
android:toDegrees 旋轉結束的角度
android:pivotX 旋轉中心點的X座標
android:pivotY 旋轉中心點的Y座標

pivot 值可設定%設定相對View的百分比位置，或%P來設定相對Parent View的百分比位置

例：旋轉720度，即2圈。pivotX="50%" 代表中心點在中間

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="720"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>

啟動這些動畫的方式，在Activity呼叫View.startAnimation

imageView.startAnimation(AnimationUtils.loadAnimation(this, R.anim.alpha))

完整程式
https://github.com/evanchen76/ViewAnimation

參考
https://developer.android.com/guide/topics/graphics/view-animation.html

線上課程：
Android 動畫入門到進階
Android UI 進階實戰(Material Design Component)

出版書：
Android TDD 測試驅動開發：從 UnitTest、TDD 到 DevOps 實踐